<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小项目</title>
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
	<div id="backG"></div>
	<ul id="ul">
		<li>红色</li>
		<li>橙色</li>
		<li>黄色</li>
		<li>绿色</li>
		<li>蓝色</li>
	</ul>
	<script type="text/javascript">
	var ul = document.getElementById('ul');
	var backG = document.getElementById('backG');//
	ul.addEventListener('click', function(e){
		var that = e.target;
		console.log(e);
		if (that.innerHTML=="红色") {
    		backG.style.background="red";
    	}
    	else if(that.innerHTML=="橙色") {
    		backG.style.background="orange";
    	} 
    	else if(that.innerHTML=="黄色") {
    		backG.style.background="yellow";
    	}
    	else if(that.innerHTML=="绿色") {
    		backG.style.background="green";
    	}	
    	else if(that.innerHTML=="蓝色") {
    		backG.style.background="blue";
    	}
	});
	</script>
	
</body>
</html>